<!DOCTYPE html>
<html lang="fr">
    <head>
        <?php
        session_start();
        if (!isset($_SESSION['id']) && empty($_SESSION['id']))
            header('location:index.php');
        ?> 
        <meta charset="utf-8">
        <title>ServerWebOs</title>

        <script src="js/html5-ie.js"></script>
        <script src="js/clicDroit.js"></script>   
        <script src="jquery/jquery-1.6.2.js"></script>
        <script src="jquery/jquery.effects.core.js"></script> 
        <script src="jquery/jquery.ui.core.js"></script>
        <script src="jquery/jquery.ui.widget.js"></script>
        <script src="jquery/jquery.ui.mouse.js"></script>
        <script src="jquery/jquery.ui.draggable.js"></script>
        <script src="jquery/jquery.ui.resizable.js"></script>
        <script src="jquery/jquery.effects.explode.js"></script>
        <script src="jquery/jquery.effects.fade.js"></script>
        <script src="jquery/jquery.effects.clip.js"></script>
        <script src="jquery/jquery.effects.bounce.js"></script>

        <link rel="stylesheet" href="css/cssverticalmenu.css" />
        <link rel="stylesheet" href="jquery/themes/base/jquery.ui.all.css" />

        <style>            
            *{padding: 0 ; margin: 0; }
            .draggable { float: left; border:2px solid black ; box-shadow : 4px ; background-color: white ; position: relative; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;}
            #contour { width: 99%;   vertical-align: bottom; margin: auto ;  } 
            .commande-fenetre { background-color: #468ffc ; height: 25px; width: 100%; vertical-align: middle;-webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px;-moz-border-radius-topleft: 10px;-moz-border-radius-topright: 10px;border-top-left-radius: 10px;border-top-right-radius: 10px;}
            .contenu-fenetre {  width: 100%; height: 100%; }
            nav{bottom: 0 ; border: 0px solid black ; width: 99.5% ; height: 65px; position : fixed ; float: left; text-align: center; border-top: 1px solid #1c94c4}
            .showFenetre{width: 60px ; padding-top: 60px ; cursor: pointer; overflow: hidden; height: 0 ; border: none ; margin-right: 10px ; float: left ;  }
            #dock{width: 500px ;  height: 65px ; margin: auto ; }
            body{ background-color: #adcefe ;}
            .fermer{background: url(images/fermer.png) ; width: 17px; height: 0; padding-top: 17px ; overflow: hidden ; background-position: bottom ; float: right ; border: none ; margin-top: 3px ; margin-right: 5px ; }
            .fermer:hover{background-position: top; }
            .titre{margin-left: 20px ; }
            #start{ width: 60px ; padding-top: 60px ; cursor: pointer; overflow: hidden; height: 0 ; border: none ; margin-right: 10px ; float: left ;  }
            #menuStart{position: absolute ; bottom: 0; margin-bottom: 66px; display: none; z-index: 100; cursor: pointer ;}
            #video{width: 400px ; height: 400px; }
            #contact{width: 200px ; height: 200px ; }
            #doc{width: 200px ; height: 200px ; }
            #image{width: 200px ; height: 200px ; }
            #stat{width: 200px ; height: 200px ; }
            #music{width: 200px ; height: 200px ; }
        </style>

        <script>
            
            /* CHARGEMENT DE LA PAGE */ 
            function load()
            {
                // On attribtut la taille de la fenetre global pour ne pas dépasser
                document.getElementById("contour").style.height = haut+"px" ;
                                
                document.getElementById("largeur").style.width = larg/2+"px" ;                
                document.getElementById("hauteur").style.height = haut/2+"px" ;
            }
            
            /* DETECTION DE IE7 ET IE8 */ 
            var IE = 'false' ;
            var strChUserAgent = navigator.userAgent; 
            var intSplitStart = strChUserAgent.indexOf("(",0); 
            var intSplitEnd = strChUserAgent.indexOf(")",0); 
            var strChMid = strChUserAgent.substring(intSplitStart, intSplitEnd); 
            if(strChMid.indexOf("MSIE 7") != -1) IE = 'true';            
            if(strChMid.indexOf("MSIE 8") != -1) IE = 'true';
            
            /* CALCUL DE TAILLE DE PAGE */            
            if (IE == 'true')
            {
                var larg = (document.documentElement.clientWidth);
                var haut = (document.documentElement.clientHeight)-80;
            }
            else
            {
                var larg = (window.innerWidth);
                var haut = (window.innerHeight)-80;
            }
                     
            /* FONCTION SUR LA FENETRE */            
            $(function() {                
                // Contenu dragable
                $( ".draggable" ).draggable({ containment: "#contour", scroll: false ,  handle: ".commande-fenetre"  });  
                $( ".draggable" ).draggable({ stack: "div" });
                // Contenu redimensionnable
                $( ".draggable" ).resizable({maxHeight: haut ,maxWidth: larg-20 ,minHeight: 200 , minWidth: 200});
            });
            
             
            /* AFFICHER/DISPARAITRE LA FENETRE */
            $(function() {                
               
                $( "#start" ).click(function() {                           
                    $("#menuStart").toggle("fade",500) ; 
                });
                
                $("#contour").click(function(){  
                    if($(this).attr('id'))
                    $("#menuStart").hide("fade",500) ;
                });                     
                
                $( ".hideFenetre" ).click(function() {                    
                    options = {};
                    var divId = $(this).text();
                    $( "#"+divId  ).effect( "fade", options, 500);
                });
                
                $( ".showFenetre" ).click(function() { 
                    var divId = $(this).text();                                     
                    var options = {};
                    $( "#"+divId ).removeAttr( "style" ).hide().fadeIn();
                    $(this).effect("bounce",options,500);
                });
                
                 $( ".menuShowFenetre" ).click(function() { 
                    var divId = $(this).text();                                     
                    var options = {};
                    $( "#"+divId ).removeAttr( "style" ).hide().fadeIn();
                    $(this).effect("bounce",options,500);
                });
            });
             
             
        </script>
    </head>
    <body onload="return load();">

<?php include 'include/clicDroit.php'; ?>

        <div id="contour"> 

            <!-- MENU -->
            <section id="menuStart">
                <ul id="verticalmenu" class="glossymenu">
                    <li><a class="menuShowFenetre">music</a></li>
                    <li><a class="menuShowFenetre">contact</a></li>
                    <li><a class="menuShowFenetre">doc</a></li>
                    <li><a class="menuShowFenetre">image</a></li>
                    <li><a class="menuShowFenetre">stat</a></li>
                    <li><a class="menuShowFenetre">video</a></li>
                    
                </ul>
            </section>

            <!-- MUSIC -->
            <div id="music" class="draggable" style="display: none;">
                <div class="commande-fenetre">    
                    <button class="hideFenetre fermer">music</button>                    
                    <section class="titre">Musique</section>
                </div>
                <div class="contenu-fenetre">
<?php include 'applications/music.php'; ?>
                </div>
            </div> 
            <!-- FIN MUSIC -->

            <!-- CONTACT -->
            <div id="contact" class="draggable" style="display: none;">
                <div class="commande-fenetre">    
                    <button class="hideFenetre fermer">contact</button>                    
                    <section class="titre">Contact</section>
                </div>
                <div class="contenu-fenetre">
<?php include 'applications/contact.php'; ?>
                </div>
            </div> 
            <!-- FIN CONTACT -->

            <!-- DOC -->
            <div id="doc" class="draggable" style="display: none;">
                <div class="commande-fenetre">    
                    <button class="hideFenetre fermer">doc</button>                    
                    <section class="titre">Documents</section>
                </div>
                <div class="contenu-fenetre">
<?php include 'applications/doc.php'; ?>
                </div>
            </div> 
            <!-- FIN DOC -->

            <!-- IMAGES -->
            <div id="image" class="draggable" style="display: none;">
                <div class="commande-fenetre">    
                    <button class="hideFenetre fermer">image</button>                    
                    <section class="titre">Images</section>
                </div>
                <div class="contenu-fenetre">
<?php include 'applications/image.php'; ?>
                </div>
            </div> 
            <!-- FIN IMAGES -->

            <!-- STAT -->
            <div id="stat" class="draggable" style="display: none;">
                <div class="commande-fenetre">    
                    <button class="hideFenetre fermer">stat</button>                    
                    <section class="titre">Statistiques</section>
                </div>
                <div class="contenu-fenetre">
<?php include 'applications/stat.php'; ?>
                </div>
            </div> 
            <!-- FIN STAT -->

            <!-- VIDEO -->
            <div id="video" class="draggable" style="display: none; ">
                <div class="commande-fenetre">    
                    <button class="hideFenetre fermer">video</button>                    
                    <section class="titre">Vidéos</section>
                </div>
                <div class="contenu-fenetre">
<?php include 'applications/video.php'; ?>
                </div>
            </div> 
            <!-- FIN VIDEO -->
        </div>

        <nav>
            <button id="start"  style="background: url(images/start.png) ;" >start</button>
            <section id="dock">
                <button class="showFenetre"  style="background: url(images/music.png) ;" >music</button>
                <button class="showFenetre"  style="background: url(images/contact.png) ;">contact</button>
                <button class="showFenetre"  style="background: url(images/doc.png) ;">doc</button>
                <button class="showFenetre"  style="background: url(images/photo.png) ;">image</button>
                <button class="showFenetre"  style="background: url(images/stat.png) ;">stat</button>
                <button class="showFenetre"  style="background: url(images/video.png) ;">video</button>
            </section>
        </nav> 

    </body>
</html>
